<template lang="">
  
    <div style=" width: 100%;height:100%;position: relative;overflow-y: scroll;

overflow-x: scroll;">
  
		<div class="left_box" style="float: left;
			left:0;
			width: 50%;
			height:100%;
			position: absolute;
			top:0%
			">

           <div class="techer" style="margin-top:20px;height:20%;overflow:auto;min-height:100px;">
		   
           		<div class="techer_p" style="float:left;width: 48%;height: 100%;background-color:#ed667c;position: relative;">
           			<div class="techer_img" style="position: absolute; height: 70px;width:70px;right: 60%;top: 26%;border-radius: 50%;background: url('../../assets/homePicture/tercher.png') no-repeat center;background-color: white;min-height:60px;min-width:60px;" align="center">
					
					<img src="../../assets/homePicture/tercher.png" style="height:50px;width:50px;margin-top:10px;min-height:40px;min-width:40px;">
					
					</div>
           			<div class="techer_count" style="position: absolute; height: 60px;width: 70px;right: 24%;top: 23%"> 
           				<div class="techer_count_p" style="font-size:16px;color: white;padding-bottom:5px " >讲师人数</div>
           				<div class="techer_count_c" style="font-size: 50px;color: white;">{{teacherNums}}</div>
           			</div>
           		</div>
           		<div class="couser" style="float:right;right: 0px;width: 48%;height: 100%;background-color: #579dee;min-height:100px;;position: relative;">
           			<div class="couser_img" style="position: absolute; height: 70px;width: 70px;right: 60%;top: 26%;border-radius: 50%;background: url('../../assets/homePicture/course.png') no-repeat center;background-color: white;" align="center">
					<img src="../../assets/homePicture/course.png" style="height:50px;width:50px;margin-top:10px">
					</div>
           			<div class="techer_count" style="position: absolute; height: 60px;width: 70px;right: 24%;top: 23%">
           				<div  class="techer_count_p" style="font-size: 16px;color: white; padding-bottom:5px">课程数量</div>
           				<div class="techer_count_c" style="font-size: 50px;color: white;">{{courseNums}}</div>
           			</div>
           		</div>
           		
           </div>
		   
           <div class="clear" style=" clear:both;
			 line-height:0;
			 height:0;
			 font-size:0;
			 zoom:1;
			 "></div>
        
           <div class="bing_box" style="background: white;height: 35%;width: 100%;margin-top: 20px;min-height:200px;position:relative;position: absolute;
			top:22%">
		   
           	 <div class="bing_title" style="height: 35px;border-bottom: 1px solid #f0f0f0;">
           	 	<div class="bing_bg" style="width: 8px;background-color: #579dee;height: 20px;margin-top: 5px;float: left;margin-left:1%"></div>
           	 	<span class="bing_font" style="font-size: 15px;line-height: 33px;margin-left: 20px;padding-top:4px;">各类型课程数量</span>
           	 </div>
			 
           	 <div id="bing" style="width:70%; height: 80%;position:absolute;left:-7%;"></div>
			 
           	 <div class="bing_vive" style="margin-top: 5%;position:absolute;right:15%">
			 
           	 	<div class="bing_vive_font" style="color: #999999;font-size: 1.5vw;text-align: right;margin-top:5%">最多</div>
           	 	<div class="bing_vive_bf" style="font-size: 2vw;text-align: right;margin-top: 8%;">{{sortNum[0]}}</div>
           	 	<div class="bing_vive_pu" style="font-size: 0.5vw;text-align: right;margin-top: 15%;color:#999999"><div class="bing_vive_m" style="font-size: 0.5vw;text-align: right;float: left;margin-right: 10px;margin-right:0px"> <div class="bing_vive_big" style="width: 40px;height: 10px;background-color: #6ab0b8;display: inline-block;"></div>  微课程</div> <div class="bing_vive_b" style="width: 40px;height: 10px;background-color: #2f4554;display: inline-block;margin-left:15px" ></div>  外部课程</div>
           	 	<div class="bing_vive_pu" style="font-size: 0.5vw;text-align: right;margin-top: 5%;color:#999999"> <div class="bing_vive_s" style="width: 40px;height: 10px;background-color: #c23531;display: inline-block;"></div>  内部课程</div>
           	 </div>
           	 
           </div>
		   
           <div class="clear"></div>
        
           <div style="background: white;height: 40%;width: 100%;margin-top: 20px;min-height:200px;position:relative;position: absolute;
			top:59%">
           	 <div style="height: 35px;border-bottom: 1px solid #f0f0f0;">
           	 	<div style="width: 8px;background-color: #579dee;height: 20px;margin-top: 5px;float: left;margin-left:1%"></div>
           	 	<span style="font-size: 15px;line-height: 33px;margin-left: 10px;margin-left: 20px;">讲师课时排行</span>
           	 </div>
           	 
           	 
           	  <div style="float: left;margin-right: 15%;margin-top: 20px;margin-top: 5%;margin-left: 5%;">
           	 	<div style="color: #999999;font-size: 1.5vw;text-align: left;margin-top:20%">最多</div>
           	 	<div style="font-size: 2vw;text-align: left;margin-top: 20%;">{{courseTime[0]}}</div>
           	 	<!-- <div style="font-size: 0.5vw;text-align: left;margin-top: 40%;"><div style="width: 40px;height: 10px;background-color: #2f4554;display: inline-block;"></div>    zuis</div> -->
           	 	<div style="font-size: 0.5vw;text-align: left;margin-top: 20%;"> <div style="width: 40px;height: 10px;background-color: #c23531;display: inline-block;"></div>    课时</div>
           	 </div>
			 
           	<div id="main" style="width:80%; height: 100%;position:absolute;left:20%"></div>
           	
           </div>

   		
   	</div>
	
	
   	
  
   	<div class="right_box" style="	
		    float: right;
			width: 50%;
			height: 100%;position: absolute;
			top:0%;right:0px">
   
           <div style="background: white;height: 35%;margin-left: 20px;margin-top:20px;position:relative;width: 97%;min-height:200px;position: absolute;
			top:0%">
           	 <div style="height: 35px;border-bottom: 1px solid #f0f0f0;">
           	 	<div style="width: 8px;background-color: #579dee;height: 20px;margin-top: 5px;float: left;margin-left: 1%;"></div>
           	 	<span style="font-size: 15px;line-height: 33px;margin-left: 20px;">学员公司级、部门级听课时长排行</span>
           	 </div>
           	 
           
           	 	<div style="color: #999999;font-size: 1.5vw;text-align: left;position:absolute;left:5%;top:30%">最多</div>
					
           	 	<div style="font-size: 2vw;text-align: left;position:absolute;left:5%;top:45%">{{innerCourseTime[0] > outterCourseTime[0] ? innerCourseTime[0] : outterCourseTime[0] }}</div>
           	 	<div style="font-size: 0.5vw;text-align: left;position:absolute;left:5%;top:70%"><div style="width: 40px;height: 10px;background-color: rgb(194, 53, 49);display: inline-block;"></div>   公司级</div>
           	 	<div style="font-size: 0.5vw;text-align: left;position:absolute;left:5%;top:80%"><div style="width: 40px;height: 10px;background-color: rgb(47, 69, 84);display: inline-block;"></div>   部门级</div>
          
			 
             <div id="zhe" style="width:90%; height: 100%;position:absolute;left:17%"></div>
           
		   
		   </div>
     
           <div style="background: white;height: 25%;width: 97%;margin-left: 20px;margin-top: 20px;position:relative;min-height:100px;position: absolute;
			top:37%;">
           	 <div style="height: 35px;border-bottom: 1px solid #f0f0f0;">
           	 	<div style="width: 8px;background-color: #579dee;height: 20px;margin-top: 5px;float: left;margin-left: 1%;;"></div>
           	 	<span style="font-size: 15px;line-height: 33px;margin-left: 20px;">通知</span>
           	 </div>
           	 <table width="100%" height="70%" style="table-layout: fixed;">
           	 	<tr v-for="(item,index) in message_list" :key="item.id">
           	 		<td style="text-align: right;width:6%;margin-left:5%;height:5%">
                  <img v-show="index == 0" src="../../assets/homePicture/laba.png" style="position:relative;top:5px;height:15px;width:18px;margin-right:10px">
                </td>
           	 		<td style="text-align: left;font-size:0.85vw;color: #999;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-top:5px;padding-bottom:0px">{{item.title}} : {{item.content}}</td>
           	 		<td style="font-size: 0.85vw;color: #999;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;width:16%;padding-top:5px;padding-bottom:0px">{{item.msgTime.split(' ')[0]}}</td>
           	 	</tr>
           	 </table>
           </div>
           <div style="background: white;height:35%;width: 97%;margin-left: 20px;margin-top: 20px;padding-bottom:3%;min-height:100px;position: absolute;
			top:64%;">
           	 <div style="height: 50px;">
           	 	<div style="width: 60px;height: 50px;margin-left: 10px;float: left;background: url(../../assets/homePicture/ran.png)  no-repeat center;">
              <img src="../../assets/homePicture/ran.png" style="height:50px;width:50px;">
            </div>
           	 	<span style="font-size: 16px;line-height: 50px;margin-left: 10px;">排行榜</span>
           	 </div>
           	 <table >
           	 	<tr>
                <td ><div  style="margin-left: 10px;"></div>   </td>
           	 		<td style="font-size: 0.85vw;color: #999;"><div style="border-bottom: 2px solid #579dee;margin-right:10px">总榜</div></td>
           	 	</tr>
           	 </table>
           	 <table v-for="(item,index) in courseStudentNum" :key="index" width="100%" height="12%" class="shi">
           	 	<tr style="height:25px;">
           	 		<td style="font-size: 0.85vw;color: #999;border-bottom: 1px solid #f0f0f0;height:10%;width:20px">   </td>
					      <td style="width:340px;font-size: 0.85vw;color: #999;border-bottom: 1px solid #f0f0f0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.courseName}}</td>
           	 		<td style="font-size: 0.85vw;color: #999;border-bottom: 1px solid #f0f0f0;">{{item.teaName}}</td>
           	 		<!-- <td style="font-size: 17px;color: #999;border-bottom: 1px solid #f0f0f0;"></td> -->
           	 		<td style="font-size: 0.85vw;color: #999;"></td>
           	 		<td style="text-align: right;font-size:0.85vw;color: #999;border-bottom: 1px solid #f0f0f0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">面授课程</td>
           	 	</tr>
           	 </table>
           </div>
   	</div>
		<div style="width:1000px;background-color:#f0f0f0;overflow: auto;color:#f0f0f0">x</div>
    </div>

</template>
<style lang="less">
</style>

<script>
export default {
  name: "FuncFormsBase",
  data() {
    return {
      teacherNums: "",
      courseNums: "",
      courseTimeSort: [],
      courseTime: [],
      teaName: [],
      innerCourse: [],
      outterCourse: [],
      innerCourseTime: [],
      outterCourseTime: [],
      sortNum: [],
      message_list: [],
      courseStudentNum: []
    };
  },
  mounted() {
    let that = this;
    let params = {
      isRead: 0, //0未读  1已读
      pageNum: 1,
      pageSize: 10
    };
    // 排行榜
    that.$get("courseStudentNum").then(res => {
      if (res.success && res.data.length > 0) {
        if (res.data.length > 7) {
          that.courseStudentNum = res.data.splice(0, 7);
        }else{
          that.courseStudentNum = res.data;
        }
      }
    });
    // 消息列表
    that.$get("message_list", params).then(res => {
      if (res.success && res.data.rows.length > 0) {
        that.message_list = res.data.rows.splice(0, 4);
      }
    });
    // 导师数量
    that.$get("teacherNums").then(res => {
      that.teacherNums = res.data;
    });
    // 课程数量
    that.$get("courseNums").then(res => {
      that.courseNums = res.data;
    });
    // 课时柱状图
    that.$get("courseTimeSort").then(res => {
      let courseTime = [];
      let teaName = [];
      that.courseTimeSort = res.data;
      if (res.data.length > 0) {
        res.data.map(function(item) {
          courseTime.push(item.courseTime);
          teaName.push(item.teaName);
        });
      }
      that.drawLine(teaName, courseTime);
      that.courseTime = courseTime;
    });
    // 课程饼图
    that.$get("courseKind").then(res => {
      let courseKind = [];
      let sortNum = [];
      if (res.success) {
        if (res.data.length > 0) {
          res.data.map(item => {
            courseKind.push({
              value: item.num,
              name: item.name
            });
            sortNum.push(item.num);
          });
        }
        that.sortNum = sortNum.sort((a, b) => {
          return b - a;
        });
        that.pie(courseKind);
      }
    });
    // 培训折线图
    that.$get("courseDeptSort").then(res => {
      let innerCourseTime = [];
      let outterCourseTime = [];
      let courseStudents = [];
      if (res.success) {
        if (res.data.innerCourse.length > 0) {
          res.data.innerCourse.map(function(item) {
            innerCourseTime.push(item.time);
            courseStudents.push(item.name);
          });
        }
        if (res.data.outterCourse.length > 0) {
          res.data.outterCourse.map(function(item) {
            outterCourseTime.push(item.time);
          });
        }
        that.innerCourseTime = innerCourseTime;
        that.outterCourseTime = outterCourseTime;
        that.zheLine(innerCourseTime, outterCourseTime, courseStudents);
      }
    });
  },
  methods: {
    drawLine(teaName, courseTime) {
      //柱状
      console.log(teaName);
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("main"));
      myChart.resize();
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "",
            crossStyle: {
              color: "#ffff"
            }
          }
        },

        toolbox: {
          feature: {}
        },
        legend: false,
        xAxis: [
          {
            data: teaName,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "课时",
            type: "bar",
            data: courseTime
          }
        ]
      });

      this.resizeWindow(myChart);
    },
    zheLine(innerCourseTime, outterCourseTime, courseStudents) {
      //折线
      var echarts = require("echarts");
      var myChartz = echarts.init(document.getElementById("zhe"));
      myChartz.resize();
      myChartz.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: courseStudents
        },
        yAxis: {
          type: "value"
        },

        series: [
          {
            name: "公司级课程",
            data: outterCourseTime,
            type: "line"
          },
          {
            name: "部门级课程",
            data: innerCourseTime,
            type: "line"
          }
        ]
      });
      this.resizeWindow(myChartz);
    },
    pie(courseKind) {
      var echarts = require("echarts");
      //饼状图
      var myCharts = echarts.init(document.getElementById("bing"));
      myCharts.resize();
      myCharts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: "课程类别",
            type: "pie",
            radius: "64%",
            data: courseKind
          }
        ]
      });
      this.resizeWindow(myCharts);
    },
    resizeWindow(chartObj) {
      window.onresize = function() {
        chartObj.resize();
      };
    }
  }
};
</script>